<template>
  <div class="container">
    <div
      v-if="isPerfectionInfo"
      class="flex-center flex v-align-c font-14 top-step pad-t-20 pad-b-20">
      <div class="circle" :class="showStyle === -2 ? 'actived' : ''">1</div>
      <div>选择身份</div>
      <div class="less">...</div>
      <div class="circle" :class="showStyle === -1 ? 'actived' : ''">2</div>
      <div>完善店铺</div>
    </div>
    <!-- 个人 / 企业 切换tab-->
    <div v-show="showStyle === -2 && isPerfectionInfo" class="tab-box flex flex-between pad-t-20 pad-l-15 pad-r-15 bg-color-white">
      <!-- identityType 身份类型：1-个人，2-企业 -->
      <div
        @click="changeTab(index)"
        class="tab-item-box flex flex-center"
        v-for="(item, index) of tabName"
        :key="index"
        :class="tabIndex === index ? 'active-style': 'disactive-style'">
        <span class="font-20">{{item.name}}</span>
        <span class="icon flex flex-center">
          <van-icon name="success" />
        </span>
      </div>
    </div>
    <div v-show="showStyle === -2 && isPerfectionInfo">
      <div v-show="tabIndex === 0" class="pad-t-16 bg-color-white">
         <!-- 身份证信息 -->
         <div class="pad-l-15 pad-r-15">
           <div>
             <span class="font-20 font-color-3 font-w">身份证信息</span>
           </div>
           <div class="font-color-9 font-12 mar-t-5">
             <span>请确保身份证边框完整、图像清晰、光线均匀</span>
           </div>
           <div class="flex flex-between mar-t-15">
             <div class="upload-box flex-center flex" @click="clickUpload('userImgOne')">
              <upload-image
                ref="userImgOne"
                text="身份证正面照"
                :imgSrc="params.memberRoleAuthority.userImgOne"
                @uploadPerSuccess="userImgOneSuccess"></upload-image>
             </div>
             <div class="upload-box flex-center flex" @click="clickUpload('userImgTwo')">
              <upload-image
                ref="userImgTwo"
                text="身份证反面照"
                :imgSrc="params.memberRoleAuthority.userImgTwo"
                @uploadPerSuccess="userImgTwoSuccess"></upload-image>
             </div>
           </div>
           <div class="mar-t-20 text-style font-12">*请务必上传您本人的身份找照片，提现账号需要和注册身份证绑定，否则将无法提现。 </div>
         </div>
        <van-field
          :value="params.memberRoleAuthority.userName"
          @change="inputBlur('memberRoleAuthority.userName', 'userNamePerVerify', $event)"
          :error="userNamePerVerify"
          label="姓名"
          placeholder="请输入姓名"
          :maxlength=5
          clearable
          required/>
        <van-field
          :value="params.memberRoleAuthority.userIdCode"
          @change="inputBlur('memberRoleAuthority.userIdCode', 'userIdCodePerVerify', $event)"
          :error="userIdCodePerVerify"
          label="身份证号"
          placeholder="请输入身份证号"
          required
          clearable
          class="border-b-no"/>
      </div>
      <div v-show="tabIndex === 1" class="pad-t-16 bg-color-white perfect-info">
        <!-- 企业信息 -->
        <div class="pad-l-15 pad-r-15 ">
          <div>
            <span class="font-20 font-color-3 font-w">企业信息</span>
          </div>
          <div class="font-color-9 font-12 mar-t-5">
            <span>请确保公司证件照边框完整、图像清晰、光线均匀</span>
          </div>
          <div class="flex flex-between mar-t-15">
            <div class="upload-box flex-center flex" @click="clickUpload('bizImgOne')">
              <upload-image
                ref="bizImgOne"
                text="上传营业执照"
                :imgSrc="params.memberRoleAuthority.bizImgOne"
                @uploadPerSuccess="bizImgOneSuccess"></upload-image>
            </div>
            <div class="upload-box flex-center flex" @click="clickUpload('bizImgTwo')">
              <upload-image
                ref="bizImgTwo"
                text="上传开户信息"
                :imgSrc="params.memberRoleAuthority.bizImgTwo"
                @uploadPerSuccess="bizImgTwoSuccess"></upload-image>
            </div>
          </div>
        </div>
        <van-field
          :value="params.memberRoleAuthority.bizName"
          @change="inputBlur('memberRoleAuthority.bizName', 'bizNamePerVerify', $event)"
          :error="bizNamePerVerify"
          label="公司名称"
          placeholder="请输入公司名称"
          clearable
          required/>
        <van-field
          :value="params.memberRoleAuthority.bizIdCode"
          @change="inputBlur('memberRoleAuthority.bizIdCode', 'bizIdCodePerVerify', $event)"
          :error="bizIdCodePerVerify"
          label="社会信用代码"
          placeholder="请输入社会信用代码"
          required
          clearable
          class="border-b-no"/>
      </div>
      <div class="height-30"></div>
      <div class="button-box">
        <button @click="nextStep">下一步</button>
      </div>      
    </div>
    <div v-show="showStyle === -1">
      <div class="pad-t-9 mar-b--5 bg-color-white">
        <h2>店铺信息</h2>
      </div>
      <van-field
        :value="params.memberStoreDTO.storeName"
        label="店铺名称"
        clearable
        placeholder="最多8个字"
        :error="usernameVerify"
        :maxlength=8
        @change="inputBlur('memberStoreDTO.storeName', 'usernameVerify', $event)"
        required/>
      <van-field
        :value="params.memberStoreDTO.storeAddress"
        label="门店地址"
        placeholder="添加地址"
        :error="addressVerify"
        required
        clearable
        @change="inputBlur('memberStoreDTO.storeAddress', 'addressVerify', $event)"
        @clear="addressClear"
        use-button-slot>
        <van-icon name="arrow" slot="button" @click="chooseLocation" />
      </van-field>
      <div class="flex pad-l-15 bg-color-white pad-t-20 pad-b-20 pad-r-30 border-b">
        <div class="width-90 line-h-1 font-15 font-color-3 pad-l-8">门店照片</div>
        <div class="flex-item" @click="clickUpload('storeImg')">
          <upload-img
            ref="storeImg"
            @upLoadStoreSuccess="storeImgSuccess"            
            @uploadStoreDelete="storeImgDelete"
            :imgSrc="imgFiles"
            :count=3></upload-img>
          <div class="font-11 font-color-9">注：请上传门店照片便于通过审核，图片大小不得超过5M(最多3张)</div>
        </div>
      </div>
      <van-field
        :value="params.memberStoreDTO.storeContact"
        label="联系人"
        placeholder="请输入联系人姓名"
        :error="contactsVerify"
        :maxlength=5
        @change="inputBlur('memberStoreDTO.storeContact', 'contactsVerify', $event)"
        clearable
        required/>
      <van-field
        :value="params.memberStoreDTO.storePhone"
        label="联系电话"
        :maxlength=11
        placeholder="请输入联系电话"
        :error="phoneVerify"
        required
        @change="inputBlur('memberStoreDTO.storePhone', 'phoneVerify', $event)"
        clearable
        class="border-b-no"/>
      <div class="height-70"></div>
      <div class="button-box" :class="isPerfectionInfo ? 'two-btn' : ''">
        <button v-if="isPerfectionInfo" @click="showStyle = -2">上一步</button>
        <button @click="confirm">确认提交</button>
      </div>
      <div class="height-10"></div>
    </div>
    <template v-if="showStyle === 0">
      <div class="img-box mar-t--23">
        <img v-if="fileSpace" class="width-152 height-152 mar-t--18" :src="fileSpace + '/images/in-audit-2.png'" alt="">
        <p class="mar-t-15 pad-t-21 mar-b--2 font-w">申请成功</p>
        <p class="font-w">审核通过后开通店铺</p>
        <button class="go-home font-17 font-w" @click="goHome">去首页逛逛</button>
      </div>
    </template>
    <template v-if="showStyle === 1">
      <div class="img-box mar-t--23">
        <img v-if="fileSpace" class="width-152 height-152" :src="fileSpace + '/images/success-apply-2.png'" alt="">
        <p class="mar-t-20 font-w">恭喜你！开通成功</p>
        <p class="mar-t-20 s-desc"><span>{{secondTxt}}</span>后进入首页 <span @click="goHome">立即跳转</span></p>
      </div>
    </template>
    <template v-if="showStyle === 3">
      <div class="img-box">
        <img v-if="fileSpace" class="width-105 height-108" :src="fileSpace + '/images/duplicate-apply2.png'" alt="">
        <p class="mar-t-15 mar-b--4">您当前已开通VIP</p>
        <p>请勿重复开启</p>
      </div>
    </template>
  </div>
</template>
<script>
import UploadImage from './component/upload-image'
import UploadImg from './component/upload-img'
import { saveMemberRoleAuthority, getMemberStoreByMemberId, getWholesaleAuthority } from '@/api/home'
export default {
  components: { UploadImage, UploadImg },
  data() {
    return {
      userNamePerVerify: false,
      userIdCodePerVerify: false,
      bizNamePerVerify: false,
      bizIdCodePerVerify: false,
      usernameVerify: false,
      addressVerify: false,
      contactsVerify: false,
      phoneVerify: false,
      imgFiles: [],
      imgSuccessFiles: [],
      isUploadFinish: false,
      params: {
        memberStoreDTO: {
          imageList: [],
          storeName: '',
          storePhone: '',
          storeAddress: '',
          latitude: '',
          longitude: '',
          storeContact: '',
          memberId: '',
          storeId: ''
        },
        memberRoleAuthority: {
          identityType: 1,
          identityName: '',
          identityNumberCode: '',
          userName: '',
          userIdCode: '',
          bizName: '',
          bizIdCode: '',
          imageList: [],
          userImgOne: '',
          userImgTwo: '',
          bizImgOne: '',
          bizImgTwo: ''
        }
      },
      uploadType: '',
      authorityId: '',
      imageList: [],
      showStyle: -2,
      secondTxt: '',
      time: 4,
      memberWholesaleAuthority: '',
      userType: 1,
      tabIndex: 0,
      tabName: [
        {
          name: '个人',
          type: 1
        }, {
          name: '企业',
          type: 2
        }
      ],
      isPerfectionInfo: '',
      uploadImgs: [], // 准备上传的文件数组
      uploadedImgs: {}, // 上传成功的文件对象
      uploadTotalCount: 0,
      uploadedCount: 0,
      uploadErrCount: 0, // 单张图片上次出错次数
      resetType: false
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    if (this.$store.state.previewImageFlag) return
    this.isPerfectionInfo = this.$pt.getStorageSync('isPerfectionInfo')
    // this.isPerfectionInfo = 0
    if (!this.isPerfectionInfo) {
      this.showStyle = -1
    }
    if (this.$pt.getStorageSync('applyDataWholesale') && !this.resetType) {
      this.params = this.$pt.getStorageSync('applyDataWholesale')
      if (this.params.memberStoreDTO.imgFiles && this.params.memberStoreDTO.imgFiles.length) {
        this.imgFiles = this.params.memberStoreDTO.imgFiles
      }
      if (this.params.memberRoleAuthority.identityType === 2) {
        this.tabIndex = 1
      }
    }
  },
  mounted() {
    this.getWholesaleAuthority()
  },
  methods: {
    userImgOneSuccess(res) {
      // 身份证正面照成功
      this.params.memberRoleAuthority.userImgOne = res.tempFilePaths[0]
    },
    userImgTwoSuccess(res) {
      // 身份证反面照成功
      this.params.memberRoleAuthority.userImgTwo = res.tempFilePaths[0]
    },
    bizImgOneSuccess(res) {
      // 上传营业执照成功
      this.params.memberRoleAuthority.bizImgOne = res.tempFilePaths[0]
    },
    bizImgTwoSuccess(res) {
      // 上传开户信息成功
      this.params.memberRoleAuthority.bizImgTwo = res.tempFilePaths[0]
    },
    storeImgSuccess(res) {
      // 上传门店照片成功
      this.imgFiles.push(res.tempFilePaths[0])
      this.params.memberStoreDTO.imgFiles = this.imgFiles
      this.$pt.setStorageSync('applyDataWholesale', this.params)
    },
    storeImgDelete(res) {
      // 删除门店照片成功
      this.imgFiles = res.files
      this.params.memberStoreDTO.imgFiles = this.imgFiles
      this.$pt.setStorageSync('applyDataWholesale', this.params)
    },
    clickUpload(type, e) {
      this.uploadType = type
      this.resetType = true
      this.chooseImage(type)
    },
    continueUplaod() {
      // 看完案例继续上传
      this.chooseImage(this.uploadType)
    },
    chooseImage(type) {
      // 调用组件的选择图片方法
      this.$refs[type].chooseImage()
    },
    nextStep() {
      if (this.params.memberRoleAuthority.identityType === 1) {
        if (!this.params.memberRoleAuthority.userImgOne) {
          return this.$utils.showToast({title: '身份证正面照不能为空!'})
        }
        if (!this.params.memberRoleAuthority.userImgTwo) {
          return this.$utils.showToast({title: '身份证反面照不能为空!'})
        }
        if (!this.params.memberRoleAuthority.userName) {
          this.userNamePerVerify = true
          return this.$utils.showToast({title: '姓名不能为空!'})
        }
        if (!this.params.memberRoleAuthority.userIdCode) {
          this.userIdCodePerVerify = true
          return this.$utils.showToast({title: '身份证号不能为空!'})
        }
        this.params.memberRoleAuthority.identityName = this.params.memberRoleAuthority.userName
        this.params.memberRoleAuthority.identityNumberCode = this.params.memberRoleAuthority.userIdCode
      } else {
        if (!this.params.memberRoleAuthority.bizImgOne) {
          return this.$utils.showToast({title: '上传营业执照!'})
        }
        if (!this.params.memberRoleAuthority.bizImgTwo) {
          return this.$utils.showToast({title: '上传开户信息!'})
        }
        if (!this.params.memberRoleAuthority.bizName) {
          this.bizNamePerVerify = true
          return this.$utils.showToast({title: '公司名称不能为空!'})
        }
        if (!this.params.memberRoleAuthority.bizIdCode) {
          this.bizIdCodePerVerify = true
          return this.$utils.showToast({title: '社会信用代码不能为空!'})
        }
        this.params.memberRoleAuthority.identityName = this.params.memberRoleAuthority.bizName
        this.params.memberRoleAuthority.identityNumberCode = this.params.memberRoleAuthority.bizIdCode
      }
      this.$pt.setStorageSync('applyDataWholesale', this.params)
      this.showStyle = -1
    },
    changeTab(index) {
      if (index === this.tabIndex) return
      this.tabIndex = index
      this.params.memberRoleAuthority.identityType = index + 1
    },
    getWholesaleAuthority() {
      const scanApply = this.$pt.getStorageSync('scanApply')
      getWholesaleAuthority(this.getCustomerId).then((response) => {
        if (response.isError) return
        this.authorityId = response.data.authorityId
        if (scanApply) {
          this.showStyle = 'applyStatus' in response.data ? response.data.applyStatus : -1 // 0:审核中 1:审核通过 2:审核未通过
          if (this.showStyle === 1) {
            this.showStyle = 3
          }
          if (this.showStyle === 2) {
            if (!this.isPerfectionInfo) {
              this.showStyle = -1
            } else {
              this.showStyle = -2
            }
          }
        } else {
          if (!this.isPerfectionInfo) {
            this.showStyle = -1
          } else {
            this.showStyle = -2
          }
          if (response.data.applyStatus === 2) {
            this.getMemberStoreByMemberId()
          }
        }
      }).catch(() => {
      })
    },
    goHome() {
      this.$pt.removeStorageSync('scanApply')
      this.$pt.removeStorageSync('wholesale')
      let that = this
      setTimeout(() => {
        that.$pt.reLaunch({
          url: '/pages/home/main'
        })
      }, 300)
    },
    timer() {
      if (this.time > 0) {
        this.time--
        this.secondTxt = this.time + 's'
        setTimeout(this.timer, 1000)
      } else {
        this.time = 0
        this.secondTxt = '0s'
        this.goHome()
      }
    },
    inputBlur(name, verify, event) {
      let value = event.mp.detail
      if (name.indexOf('.') !== -1) {
        let nameArr0 = name.split('.')[0]
        let nameArr1 = name.split('.')[1]
        this.params[nameArr0][nameArr1] = value
      } else {
        this.params[name] = value
      }
      if (value) {
        this[verify] = false
      } else {
        this[verify] = true
      }
      this.$pt.setStorageSync('applyDataWholesale', this.params)
    },
    addressClear() {
      this.params.memberStoreDTO.storeAddress = ''
      this.addressVerify = true
    },
    chooseLocation() {
      const that = this
      that.$store.commit('setPreviewImageFlag', true)
      that.$pt.chooseLocation({
        success: (res) => {
          that.params.memberStoreDTO.storeAddress = res.name
          that.params.memberStoreDTO.latitude = res.latitude
          that.params.memberStoreDTO.longitude = res.longitude
          that.addressVerify = false
        },
        fail: function(err) {
          if (err.errMsg.indexOf('cancel') !== -1) return
          that.$pt.showModal({
            content: '需要访问你的位置',
            success(res) {
              if (res.confirm) {
                that.$pt.openSetting()
              } else if (res.cancel) {
                console.log(err)
              }
            }
          })
        }
      })
    },
    saveMemberRoleAuthority() {
      this.params.memberStoreDTO.memberId = this.getCustomerId
      this.params.memberRoleAuthority.memberId = this.getCustomerId
      if (this.params.memberRoleAuthority.identityType === 1) {
        this.params.memberRoleAuthority.bizName = ''
        this.params.memberRoleAuthority.bizIdCode = ''
        this.params.memberRoleAuthority.bizImgOne = ''
        this.params.memberRoleAuthority.bizImgTwo = ''
        this.params.memberRoleAuthority.imageList = [
          {
            imageUrl: this.uploadedImgs.userImgOne,
            imageType: 2
          }, {
            imageUrl: this.uploadedImgs.userImgTwo,
            imageType: 3
          }
        ]
      } else if (this.params.memberRoleAuthority.identityType === 2) {
        this.params.memberRoleAuthority.userName = ''
        this.params.memberRoleAuthority.userIdCode = ''
        this.params.memberRoleAuthority.userImgOne = ''
        this.params.memberRoleAuthority.userImgTwo = ''
        this.params.memberRoleAuthority.imageList = [
          {
            imageUrl: this.uploadedImgs.bizImgOne,
            imageType: 4
          }, {
            imageUrl: this.uploadedImgs.bizImgTwo,
            imageType: 5
          }
        ]
      }
      this.params.memberStoreDTO.imageList = this.uploadedImgs.storeValue
      if (!this.isPerfectionInfo) {
        this.params.memberRoleAuthority = {}
      }
      // console.log('params 00', this.params)
      // console.log('params 11', this.uploadedImgs)
      this.$pt.setStorageSync('applyDataWholesale', this.params)
      saveMemberRoleAuthority(this.params).then(response => {
        if (response.isError) return
        this.$utils.showToast({title: '提交成功'})
        this.$pt.removeStorageSync('applyDataWholesale')
        // 判断是否是扫招募员二维码进入
        const scanApply = this.$pt.getStorageSync('scanApply')
        if (scanApply) {
          getWholesaleAuthority(this.getCustomerId).then((response) => {
            if (response.isError) return
            this.showStyle = response.data.applyStatus
            if (response.data.applyStatus === 1) {
              this.timer()
            }
          }).catch(() => {
          })
        } else {
          setTimeout(() => {
            this.$pt.navigateBack({ delta: 1 })
          }, 800)
        }
      }).catch({
      })
    },
    getMemberStoreByMemberId() {
      getMemberStoreByMemberId({ memberId: this.getCustomerId }).then(response => {
        if (response.isError) return
        Object.assign(this.params, response.data)
        this.imageList = response.data.imageList
        this.imgFiles = response.data.imageList
      }).catch({})
    },
    confirm() {
      if (!this.params.memberStoreDTO.storeName) {
        this.usernameVerify = true
        return this.$utils.showToast({title: '店铺名称不能为空!'})
      }
      if (!this.params.memberStoreDTO.storeAddress) {
        this.addressVerify = true
        return this.$utils.showToast({title: '门店地址不能为空!'})
      }
      if (!this.params.memberStoreDTO.storeContact) {
        this.contactsVerify = true
        return this.$utils.showToast({title: '联系人不能为空!'})
      }
      if (!this.params.memberStoreDTO.storePhone) {
        this.phoneVerify = true
        return this.$utils.showToast({title: '联系电话不能为空!'})
      }
      if (!this.$utils.phone(this.params.memberStoreDTO.storePhone)) {
        this.phoneVerify = true
        return this.$utils.showToast({title: '请输入正确的电话号码!'})
      }
      this.$pt.showModal({
        content: '是否确认申请批发权限？',
        showCancel: true,
        confirmText: '确认申请',
        success: res => {
          if (res.confirm) {
            // 调用保存接口
            this.saveData()
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    saveData() {
      // 保存数据方法
      // 先处理图片上传
      let uploadImgs = [{
        name: '身份证正面照',
        key: 'userImgOne',
        src: this.params.memberRoleAuthority.userImgOne
      }, {
        name: '身份证反面照',
        key: 'userImgTwo',
        src: this.params.memberRoleAuthority.userImgTwo
      }, {
        name: '上传营业执照',
        key: 'bizImgOne',
        src: this.params.memberRoleAuthority.bizImgOne
      }, {
        name: '上传开户信息',
        key: 'bizImgTwo',
        src: this.params.memberRoleAuthority.bizImgTwo
      }]
      if (this.imgFiles.length) {
        this.imgFiles.forEach((itemImg, indexImg) => {
          uploadImgs.push({
            name: '门店照片' + indexImg,
            key: 'storeImg' + indexImg,
            value: 'storeValue',
            src: itemImg
          })
        })
      }
      // console.log('saveData uploadImgs 00', uploadImgs)
      // console.log('saveData uploadImgs 77', this.uploadImgs)
      // 过滤src为空的元素
      this.uploadImgs = uploadImgs.filter(item => {
        // 筛选出路径不为空的且不是已上传的
        // console.log(Object.keys(this.uploadedImgs))
        let findIndex = Object.keys(this.uploadedImgs).findIndex(key => item.key === key)
        return item.src && findIndex === -1
      })
      this.uploadTotalCount = this.uploadImgs.length
      // console.log('saveData uploadImgs 11', this.uploadImgs)
      this.uploadImg()
    },
    uploadImg() {
      if (this.uploadImgs.length > 0) {
        this.$pt.showLoading({
          title: `图片上传中${this.uploadedCount}/${this.uploadTotalCount}`,
          mask: true
        })
        const uploadTask = this.$pt.uploadFile({
          url: process.env.BASE_API + '/common/uploadFiles',
          filePath: this.uploadImgs[0].src,
          name: 'files',
          success: res => {
            const result = JSON.parse(res.data)
            if (result.code === 101) {
              if (this.uploadImgs[0].value) {
                this.imgSuccessFiles.push(result.data[0])
                this.uploadedImgs[this.uploadImgs[0].value] = this.imgSuccessFiles
              } else {
                this.uploadedImgs[this.uploadImgs[0].key] = result.data[0]
              }
              this.uploadImgs.shift()
              this.uploadedCount++
              this.uploadImg()
            } else {
              console.log('图片上传发生错误', result.msg)
              // 调用图片上传出错处理函数
              this.checkError(this.uploadImgs[0])
            }
          },
          fail: err => {
            console.log('上传失败', err, this.uploadImgs[0].key)
            // 调用图片上传出错处理函数
            this.checkError(this.uploadImgs[0])
          }
        })
        uploadTask.onProgressUpdate((res) => {
          console.log('上传进度', res.progress)
        })
      } else {
        // 图片全部上传完，调用申请团长接口
        this.$pt.hideLoading()
        this.saveMemberRoleAuthority()
      }
    },
    checkError(curUpload) {
      if (this.uploadErrCount >= 1) {
        this.uploadErrCount = 0
        this.uploadedCount = 0
        this.$pt.hideLoading()
        this.$utils.showToast({
          title: `${curUpload.name}上传出错，请重新选择图片`,
          duration: 3000
        })
        return
      }
      this.uploadErrCount++
      this.uploadImg()
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  .perfect-info{
    /deep/ .van-cell__title{
      min-width: 110px!important;
      max-width: 110px!important;
    }
  }
  .tab-box {
    .tab-item-box {
      position: relative;
      width: 165px;
      height: 60px;
      background: #FFFFFF;
      border-radius: 8px;
      .icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        height: 18px;
      }
    }
    .active-style {
      border: 1px solid #FF6529;
      color:#FF6529;
      .icon {
        background: #FF6529;
        border-radius: 0px 8px 0px 8px;
        color: #fff;
      }
    }
    .disactive-style {
      border: 1px solid #EEEEEE;
      color: #333333;
      .icon {
        background: #EEEEEE;
        border-radius: 0px 8px 0px 8px;
        color: #B5B5B5;
      }
    }
  }
  .text-style {
    color: #FF6529;
  }
  .upload-box {
    width: 153px;
    height: 99px;
    border: 1px dashed #9C9C9C;
    border-radius: 5px;
    .plus-icon {
      width: 29px;
      height: 29px;
      background: #FF6529;
      border-radius: 50%;
      color: #fff;
    }
  }
  .top-step{
    .circle{
      border-radius: 50px;
      background: #b5b5b5;
      color: #fff;
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      font-size: 10px;
      margin-right: 7px;
      &.actived{
        background: #ff6529;
      }
    }
    .less{
      font-size: 10px;
      line-height: unset;
      margin: -5px 6px 0 6px;
      color: #B5B5B5;
    }
  }
  h2{
    margin: 0;
    padding: 0 0 0 15px;
    font-size: 20px;
    color: #333;
    background: #fff;
    font-weight: bold;
  }
  /deep/ .van-cell{
    padding: 16px 23px;
    .van-cell__title{
      font-size: 15px;
      color: #333;
    }
    &::before{
      left: 15px;
    }
    &::after{
      left: 0;
      border-bottom-color: #fbfbfb;
    }
  }
}
.border-b-no{
  /deep/ .van-cell{
    &::after{
      border-bottom: unset;
    }
  }
}
.line-h-1{
  line-height: 1;
}
.border-b{
  border-bottom: 0.5px solid #fbfbfb;
}
.button-box{
  &.two-btn{
    text-align: center;
    padding-left: 14px;
    button{
      display: inline-block;
      vertical-align: middle;
      margin-right: 12px;
    }
    button:first-child{
      width: 120px;
      background: #f8f8f8;
      color: #ff6529;
      border: #fba890 1px solid;
    }
    button:last-child{
      width: 215px;
    }
  }
  button{
    width: 300px;
    height: 44px;
    line-height: 44px;
    background: linear-gradient(to right, #ff8e4b, #ff4e25);
    margin: 0 auto;
    color: white;
    font-size: 14px;
    border-radius: 40px;
    &::after{
      border: unset;
    }
  }
}
.img-box{
  padding-top: 72px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img{
    border-radius: 50%;
  }
  p{
    font-size: 20px;
    &.s-desc{
      font-size: 16px;
      span{
        color: #0096FF;
      }
    }
  }
  .recruit-content{
    margin: 15px auto 0;
    text-align: center;
  }
  .go-home{
  margin-top: 83px;
  width: 240px;
  background: #ffe100;
  border-radius: 50px;  
  padding: 1px 0;
  &::after{
    border: unset;
  }
}
}
</style>
